<template>
  <div>
    <!--幻灯片-->
    <div style="margin: 3% 10%; user-select: none">
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for='banner in bannerList' :key='banner.id'>
          <a :href="banner.linkUrl" target="_blank">
            <img
              :src="banner.imageUrl"
              style="position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;margin:auto;"
              :alt="banner.title"
              :title="'跳转到'+banner.linkUrl"
            />
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--热门图片-->
    <div style="user-select: none">
      <section class="container">
        <header class="comm-title">
          <h2 class="tac">
            <span class="c-333">热门图片</span>
          </h2>
        </header>
        <div>
          <article class="comm-course-list">
            <ul class="of">
              <li v-for="image in imageList" :key="image.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img
                      :src="image.imageUrl"
                      class="img-responsive"
                      alt="course.title"
                      style="width:300px;height:200px;display:block;margin:0 auto;"
                    >
                    <div class="cc-mask">
                      <a :href="'/image/'+image.id" :title="'查看《'+image.title+'》'" target="_blank" class="comm-btn c-btn-1">开始查看</a>
<!--                      <a :href=image.imageUrl :title="'查看《'+image.title+'》'" class="comm-btn c-btn-1">开始查看</a>-->
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/image/'+image.id" :title="image.title" target="_blank" class="course-title fsize18 c-333">{{ image.title }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                      <span class="fr jgTag bg-green">
                        <i class="c-fff fsize12 f-fA">免费图片</i>
                      </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
          <section class="tac pt20">
            <a href="/image" title="/image" class="comm-btn c-btn-2">全部图片</a>
          </section>
        </div>
      </section>
    </div>

    <!--热门视频-->
    <div style="user-select: none">
      <section class="container">
        <header class="comm-title">
          <h2 class="tac">
            <span class="c-333">热门视频</span>
          </h2>
        </header>
        <div>
          <article class="comm-course-list">
            <ul class="of">
              <li v-for="video in videoList" :key="video.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img
                      :src="video.videoCover"
                      class="img-responsive"
                      alt="course.title"
                      style="width:300px;height:200px;display:block;margin:0 auto;"
                    >
                    <div class="cc-mask">
                      <a :href="'/video/'+video.id" :title="'观看《'+video.title+'》'" target="_blank" class="comm-btn c-btn-1">开始观看</a>
                      <!--                      <a :href=image.imageUrl :title="'查看《'+image.title+'》'" class="comm-btn c-btn-1">开始查看</a>-->
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/video/'+video.id" :title="video.title" target="_blank" class="course-title fsize18 c-333">{{ video.title }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                      <span class="fr jgTag bg-green">
                        <i class="c-fff fsize12 f-fA">免费视频</i>
                      </span>
                    <span class="fl jgAttr c-ccc f-fA">
                      <i class="c-999 f-fA">{{ video.playCount }}人观看</i>
                    </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
          <section class="tac pt20">
            <a href="/video" title="/video" class="comm-btn c-btn-2">全部视频</a>
          </section>
        </div>
      </section>
    </div>

    <!--热门文章-->
    <div style="margin-top: 60px;margin-bottom: 40px">
      <h1 style="text-align: center;font-size:26px;user-select: none;margin-bottom: 30px">热门文章</h1>
      <el-collapse v-for="(article, i) in articleList" :key="i" accordion style="width: 1000px; margin: auto">

        <el-collapse-item>
          <template slot="title">
            {{ i+1 }}、{{ article.title }}
            &nbsp;
            <h5 v-show="article.difficulty===0" style="font-size: 12px;color: #00AF9B">简单</h5>
            <h5 v-show="article.difficulty===1" style="font-size: 12px;color: #FFB800">中等</h5>
            <h5 v-show="article.difficulty===2" style="font-size: 12px;color: #FF2D55">困难</h5>
            &nbsp;
            <h5 v-show="i<3" style="font-size: 10px;color: #dd1100">&nbsp;{{ article.viewNum }}次浏览【hot】</h5>
            <h5 v-show="i>2" style="font-size: 10px;color: magenta">&nbsp;{{ article.viewNum }}次浏览</h5>
          </template>
          <div style="color: darkgreen">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ article.summary }}
            <a :href="'/article/'+article.id" target="_blank">
              <el-link type="warning">详情</el-link>
            </a>
            <p class="font-content" v-html="article.content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ article.content }}</p>
          </div>
        </el-collapse-item>
      </el-collapse>

      <section class="tac pt20">
        <a href="/article" title="/video" class="comm-btn c-btn-2">全部文章</a>
      </section>
    </div>

    <div style="margin-bottom: 20%; width: 100%">
      <!--日历-->
      <div style="position: absolute; padding-left: 30%">
        <template>
          <el-calendar v-model="date" style="max-height: 300px;width: 500px;">
          </el-calendar>
        </template>
      </div>


      <!--点赞-->
      <div style="position: absolute; padding-left: 60%; padding-top: 6%">
        <div>
          <span style="color: magenta"> 留个赞呗v(～￣▽￣)～ </span>
        </div>
        <div>
          <img alt="点赞" @click="addGiveLike" v-if="isClick===0" src="../static/like.png" style="height: 80px;width:80px;">
          <img alt="点赞" @click="addGiveLike" v-if="isClick===1" src="../static/liked.png" style="height: 80px;width:80px">
        </div>
        <div>
          <span style="color: blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ likeNum }}</span>
        </div>
      </div>
    </div>


    <div style="margin-top: 1%; margin-bottom: 1%">
      <!--评分-->
      <div style="display: inline-block; padding-left: 2%">
        <el-link type="primary" @click="clearRate" title="清空评分" style="font-size: 20px">网站评分</el-link>
        <el-rate
          @change="submitRate"
          v-model="rateValue"
          show-text>
        </el-rate>
      </div>

      <!--网页浏览数-->
      <div style="display: inline-block; padding-right: 2%; padding-left: 84%">
        <el-link :type="currentStyle" @click="changeStyle" style="user-select: none; font-size: 20px">网站访问数 {{ viewNum }}</el-link>
      </div>
    </div>

    <!--回到顶部-->
    <div>
      <template>
        <el-backtop></el-backtop>
      </template>
    </div>

  </div>

</template>

<script>

import giveLike from '@/api/giveLike'
import banner from '@/api/banner'
import article from '@/api/article'
import image from '@/api/image'
import video from '@/api/video'
import rate from '@/api/rate'
import view from '@/api/view'

export default {
  data() {

    return {
      //banner数组
      bannerList: [],
      //视频数组
      videoList: [],
      //图片数组
      imageList: [],
      //文章
      showAll: false,
      //日历
      date: new Date(),
      //评分
      rateValue: null,
      //点赞
      likeNum: 666,
      isClick: 0,
      second: 1,
      timeout: 100,
      //网站浏览数
      ViewNum: 666,
      currentStyle: 'success',
      //文章
      articleList: [],
      //文章摘要显示
      summaryShowStatus: false
    }
  },

  created() {
    //调用查询bannerList
    this.getBannerList()
    //调用获取首页视频
    this.getIndexVideo()
    //调用获取首页图片
    this.getIndexImage()
    //调用获取首页文章
    this.getIndexArticle()
    //调用获取点赞数
    this.getGiveLikeNum()
  },

  //页面渲染之后执行
  mounted() {
    this.addAndGetNewViewNum()
    view.addRecord()
  },

  methods: {
    //获取首页视频
    getIndexVideo() {
      video.getIndexVideo()
        .then(response => {
          console.log("=======获取首页视频=======")
          console.log(response.data.data)
          this.videoList = response.data.data.videoList
        })
    },

    //获取首页图片
    getIndexImage() {
      image.getIndexImage()
        .then(response => {
          console.log("=======获取首页图片=======")
          console.log(response.data.data)
          this.imageList = response.data.data.imageList
        })
    },

    //获取首页文章
    getIndexArticle() {
      article.getIndexArticle()
        .then(response => {
          console.log("=======获取首页文章=======")
          console.log(response.data.data)
          this.articleList = response.data.data.articleList
        })
    },

    //增加获取并当前浏览数
    addAndGetNewViewNum() {
      console.log("=====浏览数====")
      view.getViewNum()
        .then(response => {
          if (response.data.success === true) {
            this.viewNum = response.data.data.viewNum
            this.viewNum = this.viewNum + 1
            view.addViewNum(this.viewNum)
            this.$message({
              message: "您是本网站第" + this.viewNum + "位访问者",
              type: "success"
            })
          }
        })
    },

    //点击访问链接改变样式
    changeStyle() {
      let AllStyle = ['primary', 'success', 'warning', 'danger', 'info', '']
      this.currentStyle = AllStyle[Math.floor(Math.random() * AllStyle.length)]
    },

    //获取当前点赞数
    getGiveLikeNum() {
      giveLike.getGiveLikeNum()
        .then(response => {
          console.log("=====点赞====")
          this.likeNum = response.data.data.likeNum
        })
    },

    //增加点赞数
    addGiveLike() {
      if (this.isClick === 0) {
        this.addGiveLikeTimeDown()
        this.likeNum = this.likeNum + 1
        giveLike.addGiveLikeNum(this.likeNum)
        giveLike.addRecord()
      }
    },

    //点赞数计时器
    addGiveLikeTimeDown() {
      let resultGiveLike = setInterval(() => {
        --this.second
        this.isClick = 1
        if (this.second < 0) {
          this.isClick = 0
          clearInterval(resultGiveLike)
          this.second = 1
        }
      }, this.timeout);
    },

    //获取幻灯片
    getBannerList() {
      console.log("=====幻灯片====")
      banner.getBannerList()
        .then(response => {
          this.bannerList = response.data.data.list
        })
    },

    //提交评分
    submitRate() {
      //写入评分信息
      rate.submitRate(this.rateValue)
        .then(response => {
          if (response.data.success === true) {
            rate.addRecord()
            switch (this.rateValue) {
              case 1:
                this.$message({
                  message: "非常感谢您对本网站的" + this.rateValue + "星评价, 哼(￢︿̫̿￢☆)😒",
                })
                break
              case 2:
                this.$message({
                  message: "非常感谢您对本网站的" + this.rateValue + "星评价, 哼(￢︿̫̿￢☆)😢",
                  type: "warning"
                })
                break
              case 3:
                this.$message({
                  message: "非常感谢您对本网站的" + this.rateValue + "星评价 😫",
                  type: "warning"
                })
                break
              case 4:
                this.$message({
                  message: "非常感谢您对本网站的" + this.rateValue + "星评价, 嘿嘿😜",
                  type: "success"
                })
                break
              case 5:
                this.$message({
                  message: "非常感谢您对本网站的" + this.rateValue + "星好评, 嘿嘿o(*￣▽￣*)ブv😎",
                  type: "success"
                })
                break
              default:
                break
            }
          } else {
            this.$message('服务器繁忙');
          }
        })

    },

    //清空评分
    clearRate() {
      this.rateValue = null
    }
  }
}
</script>

<style>
.el-calendar-table .el-calendar-day {
  width: 60px;
  height: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.thums-up {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 24px;
}

.thums-up .heart {
  display: inline-flex;
  position: relative;
  height: 20px;
}

.thums-up .heart svg {
  stroke: #9a9daa;
  stroke-width: 60px;
  transition: fill 0.3s, stroke 0.3s;
  fill: transparent;
}

.thums-up:hover .heart svg {
  stroke: #e05b5b;
}

.thums-up-text {
  margin-left: 1px;
  font-size: 13px;
  user-select: none;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style scoped>
/deep/ .el-collapse-item__header {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 20px;
  padding: 0px 5px;
  background-color: transparent;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  transition: border-bottom-color .3s;
  outline: none;
  color: #2440BC;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 10px;
  padding-left: 5px;
  font-size: 14px;
  color: #191e34;
  line-height: 1.769230769230769;
}
</style>
